<template>
  <div id="addWork">
  <van-form @submit="onSubmit">
  <div class="radio_style">
    <span class='custom-title-font'>任务类型</span>
    <van-radio-group v-model="work_class" direction="horizontal">
      <van-radio class="custom-radio-font" v-for="item in workSystemList" :key='item.code' :name="item.code">{{item.name}}</van-radio>
    </van-radio-group>
  </div>

  <van-field
    class='custom-title-font custom-title-color custom-title-distance'
    v-model="work_describe"
    name="任务描述"
    label="任务描述"
    placeholder="任务描述"
    :rules="[{ required: false, message: '请填写任务描述' }]"
  />

  <div class="radio_style custom-title-font">
      <span>任务图片</span>
      <van-uploader v-model="fileList" :after-read="afterRead" multiple/>
  </div>

  <div class="radio_style">
    <span class='custom-title-font'>指派给</span>
    <van-checkbox-group v-model="assigned_to" direction="horizontal">
      <van-checkbox class="custom-radio-font" v-for="item in userList" :key='item.id' :name="item.id">{{item.nickname}}</van-checkbox>
    </van-checkbox-group>
  </div>

  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
  </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { purchaseSelectList, addWorkSubmit, uploadImage, getInitIdList } from '@/api/purchase.js'
import { getItem } from '@/utils/storage.js'
export default {
  data () {
    return {
      value: '',
      showPicker: false,
      work_class: '',
      username: '',
      password: '',
      radio: '1',
      work_describe: '',
      userList: [],
      assigned_to: [],
      workSystemList: [],
      fileList: [],
      fileParams: [],
      systemUserId: ''
    }
  },
  created () {
    this.getSelectInfo()
    this.getInitUser()
  },
  methods: {
    onConfirm (value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onChange (picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel () {
      Toast('取消')
    },
    async onSubmit () {
      const res = await addWorkSubmit(this.work_describe, this.work_class, this.$route.query.id, this.fileParams, this.systemUserId, this.assigned_to)
      if (res.data.code === 1) {
        this.$router.push('/question')
      } else {
        this.$toast.fail(res.data.info)
      }
    },
    async getSelectInfo () {
      this.systemUserId = getItem('userInfo').id
      const res = await purchaseSelectList()
      this.userList = res.data.data.userList
      this.workSystemList = res.data.data.workSystemList
    },
    async getInitUser () {
      const res = await getInitIdList(this.$route.query.id)
      if (res.data.code === 1) {
        res.data.data.forEach((element) => {
          this.assigned_to.push(Number(element))
        })
      }
    },
    async afterRead (file) {
      file.status = 'uploading'
      file.message = '上传中...'
      const res = await uploadImage(file.content)
      if (res.data.code === 1) {
        this.fileParams.push(res.data.data)
        file.status = 'success'
        file.message = '上传成功'
      }
    }
  }
}
</script>

<style>
  section {
    padding: 20px;
  }
  .radio_style{
     margin-left:20px;
     margin-top:10px;
  }
  .radio_style_item{
     margin-bottom: 10px;
  }
  .custom-radio-font {
     font-size: 16px;
  }
  .custom-title-font {
     font-size: 25px; /* 你想要的字体大小 */
  }
  .custom-title-color {
     color: black;
  }
  .custom-title-distance {
     margin-left: 4px;
  }
  .van-form {
    height: 520px; /* 根据需要设置固定高度 */
    overflow-y: auto; /* 垂直滚动 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
  }
</style>
